<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4275638" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">容器-4</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">容器-2</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">容器-3</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">保存-2</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">空间专题图制作</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">14_编辑</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">客户信息查询</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">编辑2</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">fenxi</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">2</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">容器 3693-2</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">容器 3693</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">容器-3</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">容器 (6)</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">容器 (5)</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">容器 (2)</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">容器-2</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">sideExpand</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">外部数据</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">个人</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">基础</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">基础数据</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">容器-3</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">容器 1</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">basic-icon-more</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">移除</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">浏览属性表</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">缩放至</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">重命名</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">在图例中显示</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">容器-2</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">矢量瓦片-2</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">矢量瓦片</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">业务图层</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">sideExpand</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">添加-2</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">外部图层</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">基础地图</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">点</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">面</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">线</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">绘制圆</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">icon</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">poi1</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">容器 3</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">容器 (1)</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">绘制多边形</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">legend</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">prefix icon</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">指南针</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">catch</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">mapLocation</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">derive</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">Rollershutter</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">historyTime</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">高级搜索</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">语音搜索</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">容器</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">选中</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">收藏操作</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">路径</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">树-箭头</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">文件夹-彩色</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">3D</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">risingSunChart</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">statistics</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">pieChart</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">barChart</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">trajectoryDiagram</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">thermalMap</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">heightFinding</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">3dimensionalFlight</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">superpositionAnalysis</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">surfaceAnalysis</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">bufferAnalysis</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">2D</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">标面</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">地球</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">标点</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">标线</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">时间轴</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">分屏</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">框选</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">轨迹分析</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">卷帘</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">面积测量</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">3D</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">网络</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">标绘</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">空间</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">时序</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">统计</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">在线制图</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">基础</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">distance</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">cc-arrow-down</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">cc-arrow-up</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e0;</span>
                <div class="name">back_light</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebe6;</span>
                <div class="name">对勾</div>
                <div class="code-name">&amp;#xebe6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">reload</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b6;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe8b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">折叠2</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">折叠1</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1704102727040') format('woff2'),
       url('iconfont.woff?t=1704102727040') format('woff'),
       url('iconfont.ttf?t=1704102727040') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-4"></span>
            <div class="name">
              容器-4
            </div>
            <div class="code-name">.icon-rongqi-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-22"></span>
            <div class="name">
              容器-2
            </div>
            <div class="code-name">.icon-rongqi-22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-32"></span>
            <div class="name">
              容器-3
            </div>
            <div class="code-name">.icon-rongqi-32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun-2"></span>
            <div class="name">
              保存-2
            </div>
            <div class="code-name">.icon-baocun-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kongjianzhuantituzhizuo"></span>
            <div class="name">
              空间专题图制作
            </div>
            <div class="code-name">.icon-kongjianzhuantituzhizuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-14bianji"></span>
            <div class="name">
              14_编辑
            </div>
            <div class="code-name">.icon-14bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kehuxinxichaxun"></span>
            <div class="name">
              客户信息查询
            </div>
            <div class="code-name">.icon-kehuxinxichaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑2
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxi"></span>
            <div class="name">
              fenxi
            </div>
            <div class="code-name">.icon-fenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2"></span>
            <div class="name">
              2
            </div>
            <div class="code-name">.icon-a-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi3693-2"></span>
            <div class="name">
              容器 3693-2
            </div>
            <div class="code-name">.icon-a-rongqi3693-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi3693"></span>
            <div class="name">
              容器 3693
            </div>
            <div class="code-name">.icon-a-rongqi3693
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-31"></span>
            <div class="name">
              容器-3
            </div>
            <div class="code-name">.icon-rongqi-31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi6"></span>
            <div class="name">
              容器 (6)
            </div>
            <div class="code-name">.icon-a-rongqi6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi5"></span>
            <div class="name">
              容器 (5)
            </div>
            <div class="code-name">.icon-a-rongqi5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi2"></span>
            <div class="name">
              容器 (2)
            </div>
            <div class="code-name">.icon-a-rongqi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi4"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-rongqi4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-21"></span>
            <div class="name">
              容器-2
            </div>
            <div class="code-name">.icon-rongqi-21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi3"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-rongqi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sideExpand1"></span>
            <div class="name">
              sideExpand
            </div>
            <div class="code-name">.icon-sideExpand1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-waibushuju"></span>
            <div class="name">
              外部数据
            </div>
            <div class="code-name">.icon-waibushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-geren1"></span>
            <div class="name">
              个人
            </div>
            <div class="code-name">.icon-geren1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichu1"></span>
            <div class="name">
              基础
            </div>
            <div class="code-name">.icon-jichu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichushuju"></span>
            <div class="name">
              基础数据
            </div>
            <div class="code-name">.icon-jichushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-3"></span>
            <div class="name">
              容器-3
            </div>
            <div class="code-name">.icon-rongqi-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi11"></span>
            <div class="name">
              容器 1
            </div>
            <div class="code-name">.icon-a-rongqi11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-basic-icon-more"></span>
            <div class="name">
              basic-icon-more
            </div>
            <div class="code-name">.icon-basic-icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yichu"></span>
            <div class="name">
              移除
            </div>
            <div class="code-name">.icon-yichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liulanshuxingbiao"></span>
            <div class="name">
              浏览属性表
            </div>
            <div class="code-name">.icon-liulanshuxingbiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suofangzhi"></span>
            <div class="name">
              缩放至
            </div>
            <div class="code-name">.icon-suofangzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongmingming"></span>
            <div class="name">
              重命名
            </div>
            <div class="code-name">.icon-zhongmingming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaitulizhongxianshi"></span>
            <div class="name">
              在图例中显示
            </div>
            <div class="code-name">.icon-zaitulizhongxianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi-2"></span>
            <div class="name">
              容器-2
            </div>
            <div class="code-name">.icon-rongqi-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiliangwapian-2"></span>
            <div class="name">
              矢量瓦片-2
            </div>
            <div class="code-name">.icon-shiliangwapian-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiliangwapian"></span>
            <div class="name">
              矢量瓦片
            </div>
            <div class="code-name">.icon-shiliangwapian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yewutuceng1"></span>
            <div class="name">
              业务图层
            </div>
            <div class="code-name">.icon-yewutuceng1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sideExpand"></span>
            <div class="name">
              sideExpand
            </div>
            <div class="code-name">.icon-sideExpand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia-2"></span>
            <div class="name">
              添加-2
            </div>
            <div class="code-name">.icon-tianjia-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-gerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-waibutuceng"></span>
            <div class="name">
              外部图层
            </div>
            <div class="code-name">.icon-waibutuceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichuditu"></span>
            <div class="name">
              基础地图
            </div>
            <div class="code-name">.icon-jichuditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dian"></span>
            <div class="name">
              点
            </div>
            <div class="code-name">.icon-dian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mian"></span>
            <div class="name">
              面
            </div>
            <div class="code-name">.icon-mian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xian"></span>
            <div class="name">
              线
            </div>
            <div class="code-name">.icon-xian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi2"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-rongqi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drawCircle"></span>
            <div class="name">
              绘制圆
            </div>
            <div class="code-name">.icon-drawCircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon"></span>
            <div class="name">
              icon
            </div>
            <div class="code-name">.icon-icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-poi1"></span>
            <div class="name">
              poi1
            </div>
            <div class="code-name">.icon-poi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi3"></span>
            <div class="name">
              容器 3
            </div>
            <div class="code-name">.icon-a-rongqi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rongqi1"></span>
            <div class="name">
              容器 (1)
            </div>
            <div class="code-name">.icon-a-rongqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-rongqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drawPolygon"></span>
            <div class="name">
              绘制多边形
            </div>
            <div class="code-name">.icon-drawPolygon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-legend"></span>
            <div class="name">
              legend
            </div>
            <div class="code-name">.icon-legend
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-prefixicon"></span>
            <div class="name">
              prefix icon
            </div>
            <div class="code-name">.icon-a-prefixicon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compass"></span>
            <div class="name">
              指南针
            </div>
            <div class="code-name">.icon-compass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy1"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-catch"></span>
            <div class="name">
              catch
            </div>
            <div class="code-name">.icon-catch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditudingwei"></span>
            <div class="name">
              mapLocation
            </div>
            <div class="code-name">.icon-ditudingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodian"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-biaodian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaomian"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.icon-biaomian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoxian"></span>
            <div class="name">
              derive
            </div>
            <div class="code-name">.icon-biaoxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Rollershutter"></span>
            <div class="name">
              Rollershutter
            </div>
            <div class="code-name">.icon-Rollershutter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-historyTime"></span>
            <div class="name">
              historyTime
            </div>
            <div class="code-name">.icon-historyTime
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-advanceSearch"></span>
            <div class="name">
              高级搜索
            </div>
            <div class="code-name">.icon-advanceSearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-voice"></span>
            <div class="name">
              语音搜索
            </div>
            <div class="code-name">.icon-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongqi1"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-rongqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite"></span>
            <div class="name">
              容器
            </div>
            <div class="code-name">.icon-favorite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favoriteSolid"></span>
            <div class="name">
              选中
            </div>
            <div class="code-name">.icon-favoriteSolid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favoriteOperate"></span>
            <div class="name">
              收藏操作
            </div>
            <div class="code-name">.icon-favoriteOperate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer"></span>
            <div class="name">
              路径
            </div>
            <div class="code-name">.icon-layer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-treeArrow"></span>
            <div class="name">
              树-箭头
            </div>
            <div class="code-name">.icon-treeArrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderColor"></span>
            <div class="name">
              文件夹-彩色
            </div>
            <div class="code-name">.icon-folderColor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-to3d"></span>
            <div class="name">
              3D
            </div>
            <div class="code-name">.icon-to3d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-risingSunChart"></span>
            <div class="name">
              risingSunChart
            </div>
            <div class="code-name">.icon-risingSunChart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-statistics"></span>
            <div class="name">
              statistics
            </div>
            <div class="code-name">.icon-statistics
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pieChart"></span>
            <div class="name">
              pieChart
            </div>
            <div class="code-name">.icon-pieChart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-barChart"></span>
            <div class="name">
              barChart
            </div>
            <div class="code-name">.icon-barChart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trajectoryDiagram"></span>
            <div class="name">
              trajectoryDiagram
            </div>
            <div class="code-name">.icon-trajectoryDiagram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thermalMap"></span>
            <div class="name">
              thermalMap
            </div>
            <div class="code-name">.icon-thermalMap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heightFinding"></span>
            <div class="name">
              heightFinding
            </div>
            <div class="code-name">.icon-heightFinding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-3dimensionalFlight"></span>
            <div class="name">
              3dimensionalFlight
            </div>
            <div class="code-name">.icon-a-3dimensionalFlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-superpositionAnalysis"></span>
            <div class="name">
              superpositionAnalysis
            </div>
            <div class="code-name">.icon-superpositionAnalysis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-surfaceAnalysis"></span>
            <div class="name">
              surfaceAnalysis
            </div>
            <div class="code-name">.icon-surfaceAnalysis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bufferAnalysis"></span>
            <div class="name">
              bufferAnalysis
            </div>
            <div class="code-name">.icon-bufferAnalysis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoomOut"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-zoomOut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoomIn"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-zoomIn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mapPoi"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-mapPoi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-locate"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-locate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-to2d"></span>
            <div class="name">
              2D
            </div>
            <div class="code-name">.icon-to2d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-standardSurface"></span>
            <div class="name">
              标面
            </div>
            <div class="code-name">.icon-standardSurface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-earth"></span>
            <div class="name">
              地球
            </div>
            <div class="code-name">.icon-earth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-poi"></span>
            <div class="name">
              标点
            </div>
            <div class="code-name">.icon-poi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-markLine"></span>
            <div class="name">
              标线
            </div>
            <div class="code-name">.icon-markLine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timeAxis"></span>
            <div class="name">
              时间轴
            </div>
            <div class="code-name">.icon-timeAxis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-splitScreen"></span>
            <div class="name">
              分屏
            </div>
            <div class="code-name">.icon-splitScreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-frameSelect"></span>
            <div class="name">
              框选
            </div>
            <div class="code-name">.icon-frameSelect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-traceAnalysis"></span>
            <div class="name">
              轨迹分析
            </div>
            <div class="code-name">.icon-traceAnalysis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rollupScreen"></span>
            <div class="name">
              卷帘
            </div>
            <div class="code-name">.icon-rollupScreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-areaMeasure"></span>
            <div class="name">
              面积测量
            </div>
            <div class="code-name">.icon-areaMeasure
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-transform3d"></span>
            <div class="name">
              3D
            </div>
            <div class="code-name">.icon-transform3d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-network"></span>
            <div class="name">
              网络
            </div>
            <div class="code-name">.icon-network
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plot"></span>
            <div class="name">
              标绘
            </div>
            <div class="code-name">.icon-plot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-space"></span>
            <div class="name">
              空间
            </div>
            <div class="code-name">.icon-space
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timeSeq"></span>
            <div class="name">
              时序
            </div>
            <div class="code-name">.icon-timeSeq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart"></span>
            <div class="name">
              统计
            </div>
            <div class="code-name">.icon-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-design"></span>
            <div class="name">
              在线制图
            </div>
            <div class="code-name">.icon-design
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-toolSearch"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-toolSearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-instrument"></span>
            <div class="name">
              基础
            </div>
            <div class="code-name">.icon-instrument
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-distance"></span>
            <div class="name">
              distance
            </div>
            <div class="code-name">.icon-distance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowDown1"></span>
            <div class="name">
              cc-arrow-down
            </div>
            <div class="code-name">.icon-arrowDown1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowUp1"></span>
            <div class="name">
              cc-arrow-up
            </div>
            <div class="code-name">.icon-arrowUp1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowLeft"></span>
            <div class="name">
              back_light
            </div>
            <div class="code-name">.icon-arrowLeft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tick"></span>
            <div class="name">
              对勾
            </div>
            <div class="code-name">.icon-tick
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reload"></span>
            <div class="name">
              reload
            </div>
            <div class="code-name">.icon-reload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowDown2"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrowDown2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-screenShrink"></span>
            <div class="name">
              fullscreen-shrink
            </div>
            <div class="code-name">.icon-screenShrink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-expandScreen"></span>
            <div class="name">
              fullscreen-expand
            </div>
            <div class="code-name">.icon-expandScreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notify"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-notify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowRight2"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-arrowRight2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-foldExpand"></span>
            <div class="name">
              折叠2
            </div>
            <div class="code-name">.icon-foldExpand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-foldShrink"></span>
            <div class="name">
              折叠1
            </div>
            <div class="code-name">.icon-foldShrink
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-4"></use>
                </svg>
                <div class="name">容器-4</div>
                <div class="code-name">#icon-rongqi-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-22"></use>
                </svg>
                <div class="name">容器-2</div>
                <div class="code-name">#icon-rongqi-22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-32"></use>
                </svg>
                <div class="name">容器-3</div>
                <div class="code-name">#icon-rongqi-32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun-2"></use>
                </svg>
                <div class="name">保存-2</div>
                <div class="code-name">#icon-baocun-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongjianzhuantituzhizuo"></use>
                </svg>
                <div class="name">空间专题图制作</div>
                <div class="code-name">#icon-kongjianzhuantituzhizuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-14bianji"></use>
                </svg>
                <div class="name">14_编辑</div>
                <div class="code-name">#icon-14bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kehuxinxichaxun"></use>
                </svg>
                <div class="name">客户信息查询</div>
                <div class="code-name">#icon-kehuxinxichaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑2</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxi"></use>
                </svg>
                <div class="name">fenxi</div>
                <div class="code-name">#icon-fenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2"></use>
                </svg>
                <div class="name">2</div>
                <div class="code-name">#icon-a-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi3693-2"></use>
                </svg>
                <div class="name">容器 3693-2</div>
                <div class="code-name">#icon-a-rongqi3693-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi3693"></use>
                </svg>
                <div class="name">容器 3693</div>
                <div class="code-name">#icon-a-rongqi3693</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-31"></use>
                </svg>
                <div class="name">容器-3</div>
                <div class="code-name">#icon-rongqi-31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi6"></use>
                </svg>
                <div class="name">容器 (6)</div>
                <div class="code-name">#icon-a-rongqi6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi5"></use>
                </svg>
                <div class="name">容器 (5)</div>
                <div class="code-name">#icon-a-rongqi5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi2"></use>
                </svg>
                <div class="name">容器 (2)</div>
                <div class="code-name">#icon-a-rongqi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi4"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-rongqi4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-21"></use>
                </svg>
                <div class="name">容器-2</div>
                <div class="code-name">#icon-rongqi-21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi3"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-rongqi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sideExpand1"></use>
                </svg>
                <div class="name">sideExpand</div>
                <div class="code-name">#icon-sideExpand1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-waibushuju"></use>
                </svg>
                <div class="name">外部数据</div>
                <div class="code-name">#icon-waibushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-geren1"></use>
                </svg>
                <div class="name">个人</div>
                <div class="code-name">#icon-geren1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichu1"></use>
                </svg>
                <div class="name">基础</div>
                <div class="code-name">#icon-jichu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichushuju"></use>
                </svg>
                <div class="name">基础数据</div>
                <div class="code-name">#icon-jichushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-3"></use>
                </svg>
                <div class="name">容器-3</div>
                <div class="code-name">#icon-rongqi-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi11"></use>
                </svg>
                <div class="name">容器 1</div>
                <div class="code-name">#icon-a-rongqi11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-basic-icon-more"></use>
                </svg>
                <div class="name">basic-icon-more</div>
                <div class="code-name">#icon-basic-icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yichu"></use>
                </svg>
                <div class="name">移除</div>
                <div class="code-name">#icon-yichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liulanshuxingbiao"></use>
                </svg>
                <div class="name">浏览属性表</div>
                <div class="code-name">#icon-liulanshuxingbiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suofangzhi"></use>
                </svg>
                <div class="name">缩放至</div>
                <div class="code-name">#icon-suofangzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongmingming"></use>
                </svg>
                <div class="name">重命名</div>
                <div class="code-name">#icon-zhongmingming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaitulizhongxianshi"></use>
                </svg>
                <div class="name">在图例中显示</div>
                <div class="code-name">#icon-zaitulizhongxianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi-2"></use>
                </svg>
                <div class="name">容器-2</div>
                <div class="code-name">#icon-rongqi-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiliangwapian-2"></use>
                </svg>
                <div class="name">矢量瓦片-2</div>
                <div class="code-name">#icon-shiliangwapian-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiliangwapian"></use>
                </svg>
                <div class="name">矢量瓦片</div>
                <div class="code-name">#icon-shiliangwapian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yewutuceng1"></use>
                </svg>
                <div class="name">业务图层</div>
                <div class="code-name">#icon-yewutuceng1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sideExpand"></use>
                </svg>
                <div class="name">sideExpand</div>
                <div class="code-name">#icon-sideExpand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia-2"></use>
                </svg>
                <div class="name">添加-2</div>
                <div class="code-name">#icon-tianjia-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-gerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-waibutuceng"></use>
                </svg>
                <div class="name">外部图层</div>
                <div class="code-name">#icon-waibutuceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichuditu"></use>
                </svg>
                <div class="name">基础地图</div>
                <div class="code-name">#icon-jichuditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dian"></use>
                </svg>
                <div class="name">点</div>
                <div class="code-name">#icon-dian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mian"></use>
                </svg>
                <div class="name">面</div>
                <div class="code-name">#icon-mian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xian"></use>
                </svg>
                <div class="name">线</div>
                <div class="code-name">#icon-xian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi2"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-rongqi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drawCircle"></use>
                </svg>
                <div class="name">绘制圆</div>
                <div class="code-name">#icon-drawCircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon"></use>
                </svg>
                <div class="name">icon</div>
                <div class="code-name">#icon-icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-poi1"></use>
                </svg>
                <div class="name">poi1</div>
                <div class="code-name">#icon-poi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi3"></use>
                </svg>
                <div class="name">容器 3</div>
                <div class="code-name">#icon-a-rongqi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rongqi1"></use>
                </svg>
                <div class="name">容器 (1)</div>
                <div class="code-name">#icon-a-rongqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-rongqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drawPolygon"></use>
                </svg>
                <div class="name">绘制多边形</div>
                <div class="code-name">#icon-drawPolygon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-legend"></use>
                </svg>
                <div class="name">legend</div>
                <div class="code-name">#icon-legend</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-prefixicon"></use>
                </svg>
                <div class="name">prefix icon</div>
                <div class="code-name">#icon-a-prefixicon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compass"></use>
                </svg>
                <div class="name">指南针</div>
                <div class="code-name">#icon-compass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy1"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-copy1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-catch"></use>
                </svg>
                <div class="name">catch</div>
                <div class="code-name">#icon-catch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditudingwei"></use>
                </svg>
                <div class="name">mapLocation</div>
                <div class="code-name">#icon-ditudingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodian"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-biaodian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaomian"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#icon-biaomian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoxian"></use>
                </svg>
                <div class="name">derive</div>
                <div class="code-name">#icon-biaoxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Rollershutter"></use>
                </svg>
                <div class="name">Rollershutter</div>
                <div class="code-name">#icon-Rollershutter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-historyTime"></use>
                </svg>
                <div class="name">historyTime</div>
                <div class="code-name">#icon-historyTime</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-advanceSearch"></use>
                </svg>
                <div class="name">高级搜索</div>
                <div class="code-name">#icon-advanceSearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice"></use>
                </svg>
                <div class="name">语音搜索</div>
                <div class="code-name">#icon-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongqi1"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-rongqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite"></use>
                </svg>
                <div class="name">容器</div>
                <div class="code-name">#icon-favorite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favoriteSolid"></use>
                </svg>
                <div class="name">选中</div>
                <div class="code-name">#icon-favoriteSolid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favoriteOperate"></use>
                </svg>
                <div class="name">收藏操作</div>
                <div class="code-name">#icon-favoriteOperate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer"></use>
                </svg>
                <div class="name">路径</div>
                <div class="code-name">#icon-layer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-treeArrow"></use>
                </svg>
                <div class="name">树-箭头</div>
                <div class="code-name">#icon-treeArrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderColor"></use>
                </svg>
                <div class="name">文件夹-彩色</div>
                <div class="code-name">#icon-folderColor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-to3d"></use>
                </svg>
                <div class="name">3D</div>
                <div class="code-name">#icon-to3d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-risingSunChart"></use>
                </svg>
                <div class="name">risingSunChart</div>
                <div class="code-name">#icon-risingSunChart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-statistics"></use>
                </svg>
                <div class="name">statistics</div>
                <div class="code-name">#icon-statistics</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pieChart"></use>
                </svg>
                <div class="name">pieChart</div>
                <div class="code-name">#icon-pieChart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barChart"></use>
                </svg>
                <div class="name">barChart</div>
                <div class="code-name">#icon-barChart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trajectoryDiagram"></use>
                </svg>
                <div class="name">trajectoryDiagram</div>
                <div class="code-name">#icon-trajectoryDiagram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thermalMap"></use>
                </svg>
                <div class="name">thermalMap</div>
                <div class="code-name">#icon-thermalMap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heightFinding"></use>
                </svg>
                <div class="name">heightFinding</div>
                <div class="code-name">#icon-heightFinding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-3dimensionalFlight"></use>
                </svg>
                <div class="name">3dimensionalFlight</div>
                <div class="code-name">#icon-a-3dimensionalFlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-superpositionAnalysis"></use>
                </svg>
                <div class="name">superpositionAnalysis</div>
                <div class="code-name">#icon-superpositionAnalysis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-surfaceAnalysis"></use>
                </svg>
                <div class="name">surfaceAnalysis</div>
                <div class="code-name">#icon-surfaceAnalysis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bufferAnalysis"></use>
                </svg>
                <div class="name">bufferAnalysis</div>
                <div class="code-name">#icon-bufferAnalysis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoomOut"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-zoomOut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoomIn"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-zoomIn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mapPoi"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-mapPoi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locate"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-locate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-to2d"></use>
                </svg>
                <div class="name">2D</div>
                <div class="code-name">#icon-to2d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-standardSurface"></use>
                </svg>
                <div class="name">标面</div>
                <div class="code-name">#icon-standardSurface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-earth"></use>
                </svg>
                <div class="name">地球</div>
                <div class="code-name">#icon-earth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-poi"></use>
                </svg>
                <div class="name">标点</div>
                <div class="code-name">#icon-poi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markLine"></use>
                </svg>
                <div class="name">标线</div>
                <div class="code-name">#icon-markLine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timeAxis"></use>
                </svg>
                <div class="name">时间轴</div>
                <div class="code-name">#icon-timeAxis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-splitScreen"></use>
                </svg>
                <div class="name">分屏</div>
                <div class="code-name">#icon-splitScreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-frameSelect"></use>
                </svg>
                <div class="name">框选</div>
                <div class="code-name">#icon-frameSelect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-traceAnalysis"></use>
                </svg>
                <div class="name">轨迹分析</div>
                <div class="code-name">#icon-traceAnalysis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rollupScreen"></use>
                </svg>
                <div class="name">卷帘</div>
                <div class="code-name">#icon-rollupScreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-areaMeasure"></use>
                </svg>
                <div class="name">面积测量</div>
                <div class="code-name">#icon-areaMeasure</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-transform3d"></use>
                </svg>
                <div class="name">3D</div>
                <div class="code-name">#icon-transform3d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-network"></use>
                </svg>
                <div class="name">网络</div>
                <div class="code-name">#icon-network</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plot"></use>
                </svg>
                <div class="name">标绘</div>
                <div class="code-name">#icon-plot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-space"></use>
                </svg>
                <div class="name">空间</div>
                <div class="code-name">#icon-space</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timeSeq"></use>
                </svg>
                <div class="name">时序</div>
                <div class="code-name">#icon-timeSeq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart"></use>
                </svg>
                <div class="name">统计</div>
                <div class="code-name">#icon-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-design"></use>
                </svg>
                <div class="name">在线制图</div>
                <div class="code-name">#icon-design</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toolSearch"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-toolSearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-instrument"></use>
                </svg>
                <div class="name">基础</div>
                <div class="code-name">#icon-instrument</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-distance"></use>
                </svg>
                <div class="name">distance</div>
                <div class="code-name">#icon-distance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowDown1"></use>
                </svg>
                <div class="name">cc-arrow-down</div>
                <div class="code-name">#icon-arrowDown1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowUp1"></use>
                </svg>
                <div class="name">cc-arrow-up</div>
                <div class="code-name">#icon-arrowUp1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowLeft"></use>
                </svg>
                <div class="name">back_light</div>
                <div class="code-name">#icon-arrowLeft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tick"></use>
                </svg>
                <div class="name">对勾</div>
                <div class="code-name">#icon-tick</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reload"></use>
                </svg>
                <div class="name">reload</div>
                <div class="code-name">#icon-reload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowDown2"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrowDown2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenShrink"></use>
                </svg>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">#icon-screenShrink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-expandScreen"></use>
                </svg>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">#icon-expandScreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notify"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#icon-notify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowRight2"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-arrowRight2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-foldExpand"></use>
                </svg>
                <div class="name">折叠2</div>
                <div class="code-name">#icon-foldExpand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-foldShrink"></use>
                </svg>
                <div class="name">折叠1</div>
                <div class="code-name">#icon-foldShrink</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
